<template>
  <el-container>
    <el-aside>
      <Tree v-model:tool="testcase" v-model:meau="case_meau"  @ChangeFather="ChangeFather" ref="update_api"></Tree>
    </el-aside>

    <el-main>
      <el-button color="#fdbdbd" @click="ListTestcase">显示所有</el-button>
      <el-button color="#adadbd" @click="AddLabel">打标签</el-button>
      <el-button color="#af3db2" @click="AddLabel">标记带故障</el-button>
      <el-button color="#adcfb2" @click="AddLabel">标记CI</el-button>
      <el-button color="#a2cd32" @click="AddLabel">标记BUG</el-button>
      <el-button color="#11c3d2" @click="AddLabel">用例同步</el-button>
      <el-input v-model="search" :suffix-icon="Search" class="table_search" style="width: 180px" placeholder="搜索用例"/>
      <Table v-model:data="tableData">
        <el-table-column prop="caseid" sortable desc label="ID"/>
        <el-table-column prop="name" sortable desc label="用例名"/>
        <el-table-column prop="ctime" sortable label="创建时间" width="180"/>
        <el-table-column prop="people" label="操作者"/>
        <el-table-column prop="titile" label="标题"/>
        <el-table-column prop="name" label="类型"/>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button type="success" link  @click="AddLabel" size="large"><el-icon><el-tooltip placement="top-start" effect="dark" content="历史记录"><List /></el-tooltip></el-icon></el-button>
          </template>
        </el-table-column>
      </Table>
      <Pagination @change="ListTestcase" v-model:page="page"/>
    </el-main>
  </el-container>

  <el-drawer
      ref="drawerRef"
      v-model="taskdetail"
      :title=title
      :before-close="handleClose"
      direction="rtl"
      class="demo-drawer"
      size="50%">
    <el-form :model="form" label-width="80px">
      <el-form-item label="用例名">
        <el-input v-model="form.name" style="width: 240px"/>
      </el-form-item>
      <el-form-item label="用例描述">
        <el-input v-model="form.desc" style="width: 240px"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="success" @click="CreateCase">提交</el-button>
    </template>
  </el-drawer>
</template>


<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {case_meau, testcase} from "./testcase_api"

import Pagination from '@/components/common/Pagination.vue';
import Table from '@/components/common/Table.vue';
import Node from "element-plus/es/components/tree/src/model/node";
import {Search} from "@element-plus/icons-vue";
import Tree from "@/view/dashboard/cicd/components/case_aside.vue";

const taskdetail = ref(false)
const title = ref("创建用例")
const search = ref("")
let page = reactive({"page": 1, "size": 15, "total": 0,id:undefined})


const form = ref({
  name: "",
  desc: "",
})

const tableData = ref([])

onMounted(() => {
  ListTestcase()
  ListcaseMeau()
})

const ChangeFather = async (testcases) =>{
  tableData.value = testcases
}


const ListTestcase = async () => {
  page.id = undefined
  var res = await testcase.List(page)
  tableData.value = res.data
  page.total = res.total
}

const MeauTree = ref([])

const ListcaseMeau = async () => {
  var res = await case_meau.List()
  MeauTree.value = res.data
}


const handleClose = () => {
  taskdetail.value = false
}

const CreateCase = async () => {
  await testcase.Create(form.value)
}

const cur_data = ref({})
const cur_node = ref(Node)

const handleNodeClick = async (data, node) => {
  cur_data.value = data
  cur_node.value = node
  page.id = data.md5
  console.log(node)
  if (data.childs == undefined) {
    data.childs = []
  }
  data.childs = await ListToolChild2(data.md5)
}

const ListToolChild2 = async (id) => {
  var res = await case_meau.List({"id": id})
  tableData.value = res.cases
  page.total = res.total
  return res.data
}

const AddLabel = () =>{

}
</script>

<style scoped lang="scss">
@import "@/styles/table_header.scss";
.folder {
  margin-right: 4px;
  color: #098f4c;
  font-size: 14px;
}
</style>
